<script setup>
import photo1 from '@/assets/img/home/photo1.png'
import photo2 from '@/assets/img/home/photo2.png'
import HomeTag from './HomeTag.vue'
import { ref } from 'vue'
import { onMounted } from 'vue'

const bubbles = ref([])
const bubbleList = ref([
  {
    id: 0,
    text: '计算机视觉'
  },
  {
    id: 1,
    text: '自然语言处理'
  },
  {
    id: 2,
    text: '语言识别'
  },
  {
    id: 3,
    text: '推荐系统'
  },
  {
    id: 4,
    text: '机器学习'
  },
  {
    id: 5,
    text: '深度学习'
  }
])
var moveBubble = null
const changeBubbleIndex = () => {
  for (let i = 0; i < bubbles.value.length; i++) {
    bubbles.value[i].style.left = Math.random() * 56 + '%'
    bubbles.value[i].style.top = Math.random() * 90 + '%'
  }
}

onMounted(() => {
  changeBubbleIndex()
  window.setTimeout(changeBubbleIndex, 1000)
  moveBubble = setInterval(changeBubbleIndex, 6000)
})

const imgList = [
  {
    id: 0,
    url: photo1,
    title: '我们培养的下一代',
    sentence1:
      '具有科学家的批判性思维、抽象逻辑思维、探究式学习能力、自立思考能力',
    sentence2: ''
  },
  {
    id: 1,
    url: photo2,
    title: '让中国儿童与世界同步',
    sentence1: '·   引入欧美教育理念和课程平台',
    sentence2: '·   掌握编程技能，成就不一样的未来'
  }
]

const elements = [
  { num: '1', textOne: '认识', textTwo: '走进智能生活' },
  { num: '2', textOne: '体验', textTwo: '开启科技探索' },
  { num: '3', textOne: '训练', textTwo: '构建模型艺术' },
  { num: '4', textOne: '创作', textTwo: '释放无限想象' }
]
</script>

<template>
  <section class="carousel">
    <div class="container carousel-containrer">
      <div class="left-part">
        <el-carousel indicator-position="none">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <el-image
              style="height: 400px; width: 100%"
              :src="item.url"
              :fit="'cover'"
            />
            <div class="content">
              <span class="title">{{ item.title }}</span>
              <div class="sentence">
                <div class="sentence1">{{ item.sentence1 }}</div>
                <div class="sentence2">{{ item.sentence2 }}</div>
              </div>
              <el-button color="rgba(255,192,1,1)">立即了解</el-button>
            </div>
          </el-carousel-item>
        </el-carousel>

        <div class="title-box">
          <h1>初识人工智能</h1>
          <h3>新手必看，四步教你玩转AI</h3>
        </div>

        <div class="tag-box">
          <home-tag :item="elements[0]">
            <template #foot>
              <div class="img-box">
                <img class="img" src="@/assets/img/home/recognize.png" />
              </div>
            </template>
          </home-tag>

          <home-tag :item="elements[1]">
            <template #foot>
              <div>
                <ul>
                  <li>
                    <div class="dot"></div>
                    AI绘画
                  </li>
                  <li>
                    <div class="dot"></div>
                    3D人脸捕捉
                  </li>
                  <li>
                    <div class="dot"></div>
                    制作表情包
                  </li>
                  <li>
                    <div class="dot"></div>
                    音乐指挥家
                  </li>
                </ul>
              </div>
            </template>
          </home-tag>

          <home-tag :item="elements[2]">
            <template #foot>
              <div>
                <ul>
                  <li>
                    <div class="dot"></div>
                    AI绘画
                  </li>
                  <li>
                    <div class="dot"></div>
                    3D人脸捕捉
                  </li>
                  <li>
                    <div class="dot"></div>
                    制作表情包
                  </li>
                  <li>
                    <div class="dot"></div>
                    音乐指挥家
                  </li>
                </ul>
              </div>
            </template>
          </home-tag>

          <home-tag :item="elements[3]">
            <template #foot>
              <div>
                <ul>
                  <li>
                    <div class="dot"></div>
                    AI绘画
                  </li>
                  <li>
                    <div class="dot"></div>
                    3D人脸捕捉
                  </li>
                  <li>
                    <div class="dot"></div>
                    制作表情包
                  </li>
                  <li>
                    <div class="dot"></div>
                    音乐指挥家
                  </li>
                </ul>
              </div>
            </template>
          </home-tag>
        </div>
      </div>

      <div class="right-part">
        <div class="headTiltle">
          <h2>拥抱AI，我们在路上</h2>
          <h1>创造·向光而行</h1>
        </div>
        <div class="bg_ball"></div>
        <div v-for="item in bubbleList" :key="item.id">
          <div class="bubble-box" ref="bubbles">
            <div class="bubble-content">
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.carousel-containrer {
  display: flex;
  gap: 4rem;
}
.carousel {
  height: 800px;
}

.title-box {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.title-box h1 {
  color: #120d2b;
  font-family: 'AlibabaPuHuiTi2';
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
}
.title-box h3 {
  margin-left: 20px;
  color: #120d2b;
  font-family: 'AlibabaPuHuiTi2';
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}

.tag-box {
  display: flex;
  gap: 1rem;
}

.img-box {
  position: relative;
  bottom: 1rem;
  right: 0.64rem;
  cursor: pointer;
}

.img-box img {
  width: 9rem;
  height: 6rem;
  border-radius: 2rem;
}

ul {
  position: relative;
  bottom: 1.25rem;
  list-style-type: none;
}

ul li {
  display: flex;
  position: relative;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  color: #43414d;
}

ul li .dot {
  margin: 6px 12px 6px 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #573eda;
}

.el-carousel {
  width: 100%;
  padding-top: 20px;
  :deep() {
    .el-carousel__container {
      height: 400px;
    }

    .el-carousel__arrow {
      font-size: 3rem;
      height: 3rem;
      width: 3rem;
      border-radius: 0;
    }
    .el-carousel__arrow:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  position: absolute;
  color: rgb(255, 255, 255);
  font-family: 'Microsoft YaHei';
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// 第二张轮播图(偶数)
.el-carousel__item:nth-child(2n) {
  .content {
    align-items: flex-start;
    top: 8rem;
    .title {
      position: relative;
      bottom: 48px;
      top: -1rem;
      left: 7.25rem;
      font-size: 30px;
      font-weight: bold;
    }

    .sentence {
      position: relative;
      bottom: 48px;
      left: 7.25rem;
      font-size: 1rem;
      line-height: 48px;
      margin-top: 40px;
    }

    .el-button {
      display: none;
    }
  }
}

// 第一张轮播图(奇数)
.el-carousel__item:nth-child(2n + 1) {
  .content {
    align-items: center;

    .title {
      font-size: 40px;
      text-align: center;
      margin-bottom: 2rem;
    }
    .sentence {
      border: 1px solid rgba(255, 255, 255, 1);
      font-size: 1rem;
      width: 35rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
    }

    .el-button {
      color: inherit;
      width: 162px;
      height: 50px;
      line-height: 50px;
      margin-top: 4rem;
    }
  }
}

.right-part {
  position: relative;
  margin-top: 20px;
  width: 100%;
  .headTiltle {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    h2 {
      color: #6047e6;
      font-size: 42px;
      font-style: normal;
      white-space: nowrap;
    }
    h1 {
      color: #120d2b;
      font-size: 70px;
      font-style: normal;
      margin-top: 15px;
      white-space: nowrap;
    }
  }
  .bg_ball {
    position: absolute;
    width: 100%;
    height: 248px;
    background-position: -60px -30px;
    background-image: url(/src/assets/img/home/Transitionball.png);
    background-size: 122%;
    background-repeat: no-repeat;
    border-radius: 0 0 0 32px;
    animation-name: transopacity;
    animation-duration: 6s;
    animation-iteration-count: infinite; //动画循环次数
    animation-direction: alternate; // 动画在下一周期逆向播放
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  @keyframes transopacity {
    33% {
      filter: blur(5px);
      opacity: 1;
    }
    67% {
      filter: blur(25px);
      opacity: 0.6;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
    }
  }
}

.bubble-box {
  position: absolute;
  width: 184px;
  height: 64px;
  line-height: 58px;
  padding: 3px;
  background: linear-gradient(96deg, #7e83ff 0%, #af93ff 100%);
  border-radius: 90px;
  transition: 6000ms;
  transition-timing-function: ease-in-out;
  cursor: default;
}

.bubble-content {
  width: 178px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  grid-gap: 10px;
  gap: 10px;
  border-radius: 90px;
  background: #fff;
  color: #765df8;
  font-family: 'AlibabaPuHuiTi2';
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.1s ease-out;
}

.bubble-content:hover {
  background: transparent;
  color: #fff;
}
</style>
